<div class="content__title">
    <h1>Lodop打印
        <small>更多体验请至
            <a href="http://ng-alain.com/components/lodop" target="_blank">ng-alain.com</a>
        </small>
    </h1>
</div>
<nz-card>
    <nz-alert *ngIf="error" [nzType]="'warning'" [nzMessage]="message">
        <ng-template #message>
            请先下载
            <a href="http://c-lodop.com/download.html" target="_blank">Lodop插件</a>。
        </ng-template>
    </nz-alert>
    <form *ngIf="!error" nz-form>
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="6">打印服务器</nz-form-label>
            <nz-form-control nz-col [nzSm]="18">
                <nz-input-group>
                    <div nz-col [nzSpan]="16">
                        <input nz-input nzPlaceHolder="https://localhost:8443/CLodopfuncs.js" [(ngModel)]="cog.url"
                               name="url">
                    </div>
                    <div nz-col [nzSpan]="8">
                        <button nz-button (click)="reload(null)">重新加载打印机</button>
                    </div>
                </nz-input-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="6">打印机</nz-form-label>
            <nz-form-control nz-col [nzSm]="18">
                <nz-select style="width:90%;" nzPlaceHolder="请选择打印机" nzShowSearch nzAllowClear [(ngModel)]="cog.printer"
                           name="printer" (ngModelChange)="changePinter($event)">
                    <nz-option *ngFor="let name of pinters" [nzLabel]="name" [nzValue]="name">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="6">纸张类型</nz-form-label>
            <nz-form-control nz-col [nzSm]="18">
                <nz-select style="width:90%;" nzPlaceHolder="请选择纸张类型" nzShowSearch nzAllowClear [(ngModel)]="cog.paper"
                           name="paper">
                    <nz-option *ngFor="let name of papers" [nzLabel]="name" [nzValue]="name">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row>
            <nz-form-label nz-col [nzSm]="6">打印内容</nz-form-label>
            <nz-form-control nz-col [nzSm]="18">
                <textarea nz-input [(ngModel)]="cog.html" name="html" nzAutosize></textarea>
                <div nz-form-extra>仅限HTML，更多类型支持请参考官网</div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row>
            <nz-form-control nz-col [nzSm]="18" [nzOffset]="6">
                <button nz-button (click)="print(true)" [nzLoading]="printing">打印预览</button>
                <button nz-button (click)="print()" [nzLoading]="printing">直接打印</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-card>
